<template>
  <div class="recommend of-y-s">
    <div class="head box box-ac box-jc">
      <img class="welcome1" :src="require('../assets/images/welcome1.png')" alt="">
      <img class="welcome2" :src="require('../assets/images/welcome2.png')" alt="">
      <img class="recommend-title  animated fadeIn" :src="require('../assets/images/recommend-title.png')" alt="">
      <img class="logo animated fadeIn" :src="require('../assets/images/logo.png')" alt="">
    </div>
    <div class="list box box-ver">
      <div v-for="(item, index) in list" :value="item" :key="index" class="time-list box box-ver">
        <div class="time">{{item.title}}</div>
        <a :href="shop.shop_url" v-for="(shop, index1) in item.shops" :value="shop" :key="index1" class="shop-item box">
          <div class="box box-f1">
            <div class="left box-f1 box box-ver box-ac">
              <div class="round"></div>
              <div class="line"></div>
            </div>
            <div class="right box box-ver">
              <div :style="{'background-image': `url(${shop.Photo})`}" class="img icon animated fadeInRightBig"></div>
              <div class="msg box box-ver">
                <div class="box">
                  <div class="name">{{shop.Name}}</div>
                  <div class="box-f1 tx-r">{{shop.SubCommercialTypeName}}</div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'recommend',
  computed: {
    ...mapState(['activityGuid', 'userInfo'])
  },
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.getRecommend()
  },
  methods: {
    getRecommend () {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.shop.recommend`,
        method: 'post',
        data: {
          activity_guid: this.activityGuid,
          openid: this.userInfo.openid
        }
      }).then(res => {
        if (+res.status === 1) {
          this.list = res.data
        }
      })
    },
    description () {
      this.$router.push({
        path: '/description'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
.recommend{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.head{
  position:relative;
  width:100%;
  height:4.9rem;
  background-size:100% 100%;
  @include bg-image('../assets/images/recommend-bg');
}
.list{
  margin:.2rem;
  background-color:#FFF;
  .time-list{
    padding:0 .3rem;
    .time{
      color:#e782ff;
      padding-top:.3rem;
    }
    .shop-item{
      margin-top:.2rem;
      text-decoration: none;
      .left{
        .round{
          width:.2rem;
          height:.2rem;
          border-radius:.2rem;
          background-color:#e782ff;
        }
        .line{
          width:.02rem;
          height:4.5rem;
          background-color:#e782ff;
          margin-top:.2rem;
        }
      }
      .right{
        .img{
          width:6rem;
          height:4.5rem;
        }
        .msg{
          font-size:.28rem;
          padding:.1rem 0;
          color:#666;
        }
      }
    }
  }
}
.welcome1,.welcome2,.logo{
  position:absolute;
  z-index:2;
  animation-delay: 1s;
}
@keyframes welcome {
  to {
    transform:translate3d(0, 0, 0)
  }
}
.welcome1{
  right:0;
  top:0;
  width:2.2rem;
  transform:translate3d(2.2rem, -2.2rem, 0);
  animation: welcome 1s linear .5s;
  animation-fill-mode: forwards;
}
.welcome2{
  left:0;
  top:2.3rem;
  width:1.88rem;
  animation: welcome 1s linear .5s;
  transform:translate3d(-2.2rem, 2.2rem, 0);
  animation-fill-mode: forwards;
}
.recommend-title{
  animation-delay: 1s;
  width:3.09rem;
}
.logo{
  width:.92rem;
  top:.6rem;
  left:50%;
  margin-left:-.46rem;
}
</style>
